<!-- 供应链 -->
<template>
  <div id="jdSupply">
    <div class="flex-column padding-10 margin-10 bg-fff border-radius-8 t-l">
      <div class="flex-a-c">
        <img :src="item.shop_logo || emptyImage" class="wh-40" alt="" />
        <div class="flex-column f-grow-1 margin-left-6 margin-right-6">
          <div class="f-14 f-bold line-clamp-1 color-000000">{{ item.shop_name }}</div>
          <div class="f-12 color-6E6E79 flex-a-c">热销<div class="themeColor f-13">{{ item.goods_count }}</div>件</div>
        </div>
        <div class="btn f-12" @click.stop="toUrl('jdSupplyShop', { id: item.shop_id })">
          进入店铺
        </div>
      </div>

      <div class="flex margin-top-10" v-if="item.goods && item.goods.length > 0" style="overflow-x: scroll;">
        <div class="flex-column margin-right-10" @click.stop="toUrl('goods', { id: goods.id })" v-for="(goods, gindex) in item.goods" :key="`${gindex}`" style="flex-shrink: 0;">
          <img :src="goods.thumb || emptyImage" alt="" class="wh-100 border-radius-8" />
          <div class="f-14 line-clamp-1 w-100 margin-top-2">{{ goods.title }}</div>
          <div class="f-13 flex-a-c themeColor">
            <div class="f-10">￥</div>
            {{ goods.price }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "jdSupply",
  props: {
    item: {
      type: Object,
      default: () => ({})
    },
    emptyImage: {
      type: String,
      default: require("@/assets/images/new_diy/image.png")
    }
  },
  data() {
    return {};
  },

  activated() {},

  components: {},

  computed: {},

  mounted() {},

  methods: {
    toUrl(name,params={},query={}){
      if(!name) return;
      this.$router.push(this.fun.getUrl(name,params,query));
    }
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.wh-40 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
}
.w-100 {
  width: 90px;
}
.wh-100 {
  width: 100px;
  height: 100px;
  object-fit: cover;
  display: block;
  margin: 0;
}
.btn {
  width: 70px;
  height: 24px;
  line-height: 24px;
  background: var(--themeBaseColor);
  border-radius: 14px 14px 14px 14px;
  font-size: 13px;
  color: #ffffff;
  text-align: center;
}
</style>
